<template>
  <!-- 购物结算 -->
  <el-container>
    <el-card style="width: 100%; margin-top: 3.5rem">
      <div style="border: solid 1px #eee">
        <h1 style="text-align: center; font-size: 28px">就爱购物车</h1>
        <table
          style="
            padding: 1rem;
            border: solid 1px #eee;
            width: 100%;
            text-align: center;
          "
        >
          <tr>
            <td style="width: 5%">
              <el-checkbox

                >全选</el-checkbox
              >
            </td>
            <td>商品名称</td>
            <td>单价</td>
            <td>数量</td>
            <td>操作</td>
          </tr>
          <tr v-for="product in CommodityParticulars" :key="product.id">
            <!-- 选框 -->
            <td>

            </td>
            <!-- 商品图片和商品名称 -->
            <td style="padding: 0.5rem">
              <!-- 图片 -->
              <div style="width: 100%; text-align: left; height: 80px">
                <span style="float: left; margin-right: 1rem">
                  <el-image :src="src" style="width: 120px"></el-image>
                </span>
                <!-- 商品名称 -->
                <div style="width: 100%; padding-top: 7%">
                  {{ product.commodityName }}
                </div>
              </div>
            </td>
            <td>￥{{ product.commodityMoney }}</td>
            <td></td>
            <td>
              <el-button type="danger" plain @click="OutShoppingTrolleyOne(product.id)"
                >移除</el-button
              >
            </td>
          </tr>
        </table>

        <div>
          <span style="float: right; margin-right: 5rem">
            <el-button
              type="primary"
              plain
              style="width: 8rem; margin: 1rem"
              @click="goSettle()"
            >
              去结算
            </el-button>
          </span>
        </div>
      </div>
      <div></div>
    </el-card>
  </el-container>
</template>

<script>
import { UserShoppingTrolley, GetCommodityAny,OutShoppingTrolley } from "../api/home"
export default {
  data () {
    return {
      // 复选框：全选/多选
      checkAll: false,
      checkedCities: [],
      CommodityParticulars: [],
      isIndeterminate: false,
      RemoveShopping:[],
      // 商品数量计数器
      num: 1,
      // 商品图片数据
      src:
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      // 是否可读的模式
      readonly: false,
    };
  },
  mounted () {
    this.FcUserShoppingTrolley();
  },
  methods: {
    // 移出购物车
    OutShoppingTrolleyOne(id){
      this.RemoveShopping.push({
        commodityId:id,
        usersId:parseInt(localStorage.getItem("Id"))
      })
      OutShoppingTrolley(this.RemoveShopping[0]).then(res=>{
        console.log(res);
        window.location.reload();
      })
    },
    handleCheckedCitiesChange (value) {
      // alert("复选框时间：" + value);
      return value;
    },
    //读取数据库对应的购物车商品
    FcUserShoppingTrolley () {
      UserShoppingTrolley(parseInt(localStorage.getItem("Id"))).then(res => {
        res.data.data.forEach(element => {
           console.log(element);
          GetCommodityAny(element.commodityId).then(res=>{
            this.CommodityParticulars.push(res.data.data)
            console.log(this.CommodityParticulars);
          })
        });
      })
    },

    // 计数器事件
    handleChange (value) {
      console.log(value);
    },
    goSettle () {
      this.$router.push('cashier');
    },
    // 删除事件
    clickRemove: function (Id) {
      // 商品数组索引始于0
      let id = Id - 1;
      alert("删除成功" + Id + "号商品: " + this.CommodityParticulars[id].commodityName + '*');
    },
  },
};
</script>

<style scoped>
tr {
  height: 3rem;
}
</style>
